<template style="overflow: hidden;">
    <div style="width: 100%; height: 100%;overflow: hidden;transition:all .5s;">
        <img id="bg" src="/static/images/可视化地图.png" style="transition: all .5s; width: 100%;height: 100%;" />
        <div style="position: absolute;width: 50%; height: .6rem;left:25%; top: 2%;cursor: pointer;" @click="$router.push('/')">
        </div>
        <div class="dian" style=" bottom: 10.5%;left: 28.5%;"></div>
        <div class="dian" style=" bottom: 27%;left: 17%;"></div>
        <div class="dian" style=" bottom: 33.5%;right: 24.5%;"></div>
        <div class="dian" style=" top: 43%;right: 10.5%;"></div>
        <div id="div"
            style="pointer-events: none; transition: all .5s; position: absolute;top: 0;left: 0;width: 100%;height: 100%;">
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {

            }
        },
        methods: {
            fangda(event) {
                let div = document.getElementById("div");
                let img = document.getElementById("bg");
                div.style.backgroundColor = "black";
                img.style.transform = "scale(2)";
                document.querySelectorAll('.dian')[0].style.display = "none";
                document.querySelectorAll('.dian')[1].style.display = "none";
                document.querySelectorAll('.dian')[3].style.display = "none";
                document.querySelectorAll('.dian')[2].style.display = "none";
                setTimeout(() => {
                    this.$router.push('./edit')
                }, 500);
            }
        },
        mounted() {
            let state = 0;
            setInterval(() => {
                if (state == 0) {
                    state = 1;
                } else {
                    state = 0;
                }
                for (let i = 0; i < document.querySelectorAll('.dian').length; i++) {
                    document.querySelectorAll('.dian')[i].onclick = ()=>{
                        this.fangda();
                    }
                    if (state) {
                        document.querySelectorAll('.dian')[i].style.transform = "scale(1.2)";
                        document.querySelectorAll('.dian')[i].style.backgroundColor = "#67C23A";
                    } else {
                        document.querySelectorAll('.dian')[i].style.transform = "scale(1)";
                        document.querySelectorAll('.dian')[i].style.backgroundColor = "red";
                    }
                }
            }, 500);
        }
    }
</script>
<style scoped>
    .dian {
        width: .35rem;
        height: .2rem;
        background-color: green;
        box-shadow: 0 0 .5rem #fff;
        position: fixed;
        border-radius: 50%;
        transition: all .5s;
        cursor: pointer;
    }
</style>
